/* Root */
    :root {
        --col1: #182628;
        --col2: #BEA57D;
        --col3: #BCE7FD;
        --col4: #2274A5;
        --col5: #F2F2F2;
        --col6: #A52422;
        --left: 0px auto auto 0px;
        --right: 0px 0px auto 0px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    

    body {
        margin: 0rem;
        font-family: 'Poppins', sans-serif; 
        color: var(--col1);
        background-color: var(--col5);

    }

/* Background */
    .background-images {   
        /* Size */
        width: 100%;      
        height: 100%;
        min-height: 100vh; 

        /* Position */
        position: absolute;
        z-index: -1;

        /* Properties */
        user-select: none;
        overflow: hidden;
    }

    .background-top {
        /* Size */
        width: 438px;
        height: 438px;

        /* Position */
        position: absolute;
        right: 0;
        top: 0;     
    }

    .background-bottom {
        /* Size */
        width: 438px;
        height: 438px;

        /* Position */
        position: absolute;
        bottom: 0;
        left: 0;       
    }

/* Glass */
    .glass {
        /* Glass Morphism */
        background: rgba( 255, 255, 255, 0.25 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
    }

    .glass-element {
        /* Size */
        margin: 1rem;

        /* Glass Morphism */
        background: rgba( 255, 255, 255, 0.25 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
    }

    /* Text */
    a {
        color: var(--col1);
        text-decoration: none;
        font-size: 1.25rem;

        /* Animation */
        transition: color ease-in-out 250ms;


    }

    a:hover {
        /* Properties */
        color: var(--col4);
    }

    p {
        margin: 0;
        font-size: 1.25rem;
    }

    /* Links in Text */
    p a {
        color: var(--col4);
        text-decoration: none;
        font-size: 1.25rem;
    }

    /* Inputs */

    .form {
        width: 100%;
        position: relative;
        height: 65px;
        overflow: hidden;
    }

    .form input {
        /* Size */
        width: 100%;
        height: 100%;
        padding-top: 1.25rem;

        /* Font */
        font-size: 1.2rem;
        color: var(--col1);
        
        /* Properties */
        border: none;
        background: none;
        outline: none;
    }

    .form label {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events:none;
        border-bottom: 1px solid var(--col1);
    }

    .form label::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 100%;
        width: 100%;
        border-bottom: 3px solid var(--col4);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .content-name {
        position: absolute;
        bottom: 5px;
        left: 0;
        transition: all 0.3s ease;
    }

    .form input:focus + .label-name .content-name, .form input:valid + .label-name .content-name{
        transform: translateY(-100%);
        font-size: 14px;
        color: var(--col4);
    }

    .form input:focus + .label-name:after, .form input:valid + .label-name::after {
        transform: translateX(0%);
    }

    input[type="checkbox"] {
        height: 2rem;
        width: 2rem;
        max-width: 100%;
        cursor: pointer;
    }

    input[type="submit"] {
        max-height: 100%;
        max-width: 100%;
        padding: 0.5rem 2rem 0.5rem 2rem;
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        background: var(--col3);
        box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        transition: all 250ms ease;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        /* Hover makes the glass background less see-through */

        /* Glass Structure */
        background: var(--col4);;
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
    }

    /* Tables */

    .content-table {
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 0.9rem;
        min-width: 400px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }


    .content-table th {
        background-color: var(--col4);
        color: var(--col5);
        text-align: left;
        font-weight: bold;
    }

    .content-table th a {
        color: var(--col5);
        font-size: 1rem;
        font-weight: normal;
    }

    .content-table th {
        padding: 12px 15px;
    }
    .content-table td {
        padding: 12px 15px;
    }

    .content-table tr {
        border-bottom: 1px solid #dddddd;
    }

    .content-table tr:nth-of-type(even) {
        background-color: #e3e3e3;
    }

    .content-table tr:last-of-type {
        border-bottom: 2px solid var(--col4);
    }

    .content-table tr.active-row {
        font-weight: bold;
        color: var(--col4)
    }


    /* Lists */
    .horizontal-list {
        margin: 0;
        display: flex;
        list-style-type: none;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* Text Area */
    .textarea {
        color: #666666;
        padding: 1em;
        border-radius: 10px;
        border: 2px solid transparent;
        outline: none;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.4;
        width: 100%;
        height: 200px;
        resize: none;
        transition: all 0.2s;
    }

    .textarea:hover {
        cursor: pointer;
        background-color: #ffffff;
    }

    .textarea:focus {
        cursor: text;
        background-color: #ffffff;
        color: var(--col1);
        border-color: #333333;
    }

    

    

    /* Site Constants */

    .page-header {
        max-width: 100%;
        font-size: 2.5rem;
        font-weight: 800;
        word-wrap: break-word;
    }

    .feedback {
        grid-area: feedback;
        display: none;
        color: rgb(182, 0, 0);
    }
    
    /* Responsive */
    @media screen and (max-width: 900px){
        .page-header {
            font-size: 5vw;
        }
    }